<template>
  <view class="goods-cart-list-box" @click="toDeatil">

    <!-- 商品点击选择按钮 -->
    <view style="padding: 10rpx 5rpx;height: 100%;" @click.stop="selectProduct(props.shoppingCart)">
      <view v-if="props.selectedAll != null"
        :class="allSelectProduct(props.selectedAll) ? 'cart-box-body-bth-choose' : 'cart-box-body-bth'">
      </view>
      <view v-else :class="selected ? 'cart-box-body-bth-choose' : 'cart-box-body-bth'">
      </view>
    </view>

    <!-- 商品图片 -->
    <image :src="props.shoppingCart.cart_image" mode="aspectFill" />
    <!-- 商品信息 -->
    <view class="cart-box-body-detail">
      <!-- 商品标题 -->
      <text class="cart-box-body-detail-title">{{ props.shoppingCart.cart_title }}</text>
      <!-- 商品规格 -->
      <view class="cart-box-body-detail-specification">{{ props.shoppingCart.cart_type }}</view>
      <view class="cart-box-body-detail-price">
        <!-- 商品价格、折扣 -->
        <view>
          <view v-if="props.shoppingCart.cart_discount > 0.00">
            <text class="cart-box-body-detail-price-discount-title">
              限时折扣</text>
            <text class="cart-box-body-detail-price-discount">
              ￥{{ props.shoppingCart.cart_price }}</text>
            <view style="color: red;">￥{{ props.shoppingCart.cart_discount }}</view>
          </view>
          <view v-else style="color: red;">￥{{ props.shoppingCart.cart_price }}</view>
        </view>

        <!-- 商品数量增减 -->
        <view class="cart-box-body-detail-quantity">
          <view @click.stop="commodityNum(false)">-</view>
          <view>{{ props.shoppingCart.cart_num }}</view>
          <view @click.stop="commodityNum(true)">+</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>
import type { ShoppingCart } from "../../../config/data/data"
import { onMounted, defineEmits, defineProps, ref, computed, toRefs, watch } from "vue"

//商品选中样式
const selected = ref(false)

//前往商品详情页
const toDeatil = () => {
  console.log(props.shoppingCart.cart_id)
  uni.navigateTo({
    url: '/subpkg/goods_detail/goods_detail?id=' + props.shoppingCart.cart_id
  })
}

//接受的商品内容数据
const props = defineProps<{ shoppingCart: ShoppingCart, selectedAll: boolean, index: number }>()

//提交商品选中事件、商品数量增减、样式规格切换
const emit = defineEmits(['goodsChoose', 'commodityNum']);

//全选或全不选
const allSelectProduct = (bool: boolean) => {
  selected.value = bool;
  return bool;
}

//单个选中商品事件
const selectProduct = (item: ShoppingCart) => {
  selected.value = !selected.value
  emit('goodsChoose', item, props.index);
}

//商品数量增加
const commodityNum = (bool: boolean) => {
  emit('commodityNum', props.index, bool)
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {

});
// 组件周期函数--监听组件数据更新之前
// beforeUpdate() {},
// // 组件周期函数--监听组件数据更新之后
// updated() {},
// // 组件周期函数--监听组件激活(显示)
// activated() {},
// // 组件周期函数--监听组件停用(隐藏)
// deactivated() {},
// // 组件周期函数--监听组件销毁之前
// beforeDestroy() {},

</script>

<style scoped lang="scss">
.goods-cart-list-box {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 250rpx;
  max-height: 350rpx;
  padding: 10rpx 0;
  margin: 10rpx 0;
  background-color: $uni-box-color;
  border-radius: 20rpx;



  .cart-box-body-detail {
    max-width: 400rpx;
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 28rpx;
    flex-direction: column;
    justify-content: center;


    .cart-box-body-detail-title {
      min-height: 50rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .cart-box-body-detail-price {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .cart-box-body-detail-price-discount {
        text-decoration: line-through;
        color: $uni-bg-color-mask;
        width: fit-content;
        font-size: 26rpx;
      }

      .cart-box-body-detail-price-discount-title {
        width: fit-content;
        font-size: 26rpx;
        color: red;
        text-decoration: none;
        margin-right: 10rpx;
      }
    }

    .cart-box-body-detail-specification {
      position: relative;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      margin: 20rpx 0;
      width: fit-content;
      color: $uni-bg-color-mask;
      text-indent: 40rpx;
      padding: 5rpx 15rpx;
      border-radius: 10rpx;
      font-size: 26rpx;
      background-color: rgba(210, 208, 208, 0.354);

      &::after {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        content: "";
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15rpx;
        height: 15rpx;
        border: 2rpx solid rgb(142, 141, 141);
        border-left: transparent;
        border-top: transparent;
        transform-origin: center center;
        transform: rotate(45deg);
      }
    }
  }

  .cart-box-body-bth,
  .cart-box-body-bth-choose {
    width: 25rpx;
    height: 25rpx;
    border: 2rpx solid rgb(140, 138, 138);
    border-radius: 50%;
  }

  .cart-box-body-bth-choose {
    border: 2rpx solid red;
    background-color: rgb(254, 222, 180)
  }

  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 4rpx;
    margin: 10rpx 20rpx;
  }

  .cart-box-body-detail-quantity {
    display: flex;
    align-items: center;

    view {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      margin: 0 5rpx;
      background-color: rgba(232, 228, 228, 0.316);
    }
  }
}
</style>